
import styled from '@emotion/styled';
import { Button } from 'antd';
import { AudioOutlined } from '@ant-design/icons'
import React from 'react'
import { useTranslation } from 'react-i18next';
import AgentService from '@/modules/Agent';

interface FooterProps {
    callType: string;
    onOK: (mode: 'video' | 'audio' | 'im') => void;
    onCancel: () => void;
    imState?: boolean;
}

const AudioAcceptBtn = styled(Button)`
    background: none;
    border: 0;
    outline: 0;
    color: #68696F;
    margin-left: 86px !important;
    padding: 10px;
`;

const Footer = (props: FooterProps) => {
    const { t } = useTranslation();
    const { callType = 'audio', onOK, onCancel, imState } = props;

    const getConformButton = () => {
        if (imState || callType === 'im') {
            return <Button type="primary" size={'middle'} onClick={() => onOK(callType as any)}>{t('accept-im')}</Button>
        } else {
            if (callType === 'audio') {
                return <Button type="primary" size={'middle'} onClick={() => onOK('audio')}>{t('accept-audio')}</Button>
            } else {
                return <Button type="primary" size={'middle'} onClick={() => onOK('video')}>{t('accept-video')}</Button>
            }
        }
    }
    return (
        <div>
            <Button size={'middle'} onClick={onCancel}>
                {t('hangup')}
            </Button>
            {
                getConformButton()
            }
            {callType === 'video' && !imState && !AgentService.configure.preferenceSettings.disableAudioAnswerToVideoCall ?
                <p>
                    <AudioAcceptBtn icon={<AudioOutlined />} type="link" size={'middle'} onClick={() => onOK('audio')}>{t('accept-audio')}</AudioAcceptBtn>
                </p>
                : null
            }
        </div>
    )
}

export default Footer